<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
</head>

<body>
<div id="main"></div>
<script type="text/babel">
    class ComTwo extends React.Component{ 
        state={
            str:'这是ComTwo的数据'
        }
        render(){
            let{num,children}=this.props;
            // 在组件标签中包括的子标签对象（如果只有一个子标签的话）
            // 如果是多个子标签，那么会得到一个数组包裹标签对象

            console.log(children);
            return (<div className='comtwo'>
                <h1>这是ComTwo的数据</h1>
                <p>{num}</p>
                {children}
                <p>---------------打印多个标签对象的某一个----------------------</p>
                {children[0]}
                </div>
                )
        }
        componentDidMound(){

        }
    }


    class Com extends React.Component{ 
        // 按照嵌套来讲
        // com组件包裹了ComTwo组件 com组件是ComTwo的父组件 ComTwo是com的子组件
        // 在com组件内编写的ComTwo标签就是 用来引入子组件的组件标签
        // 在子组件标签上所携带的属性或包裹的内容都可以传递给子组件，在子组件中通过props接收
        state={
            str:'这是com的数据'
        }
        // 将子组件标签内的内容（子标签后代标签啥的）插入到子标签内显示
        // 的现象叫插槽（组合）
        render(){return(<div className='com'>
            <h1>这是comn组件</h1>
            <ComTwo num={18}>
                <p>这是p1111{this.state.str}</p>
                <p>这是p2222222 <span>内容</span></p>
                </ComTwo>
            
            </div>)}
            componentDidMound(){

            }
    }
    ReactDOM.render(<Com />, document.getElementById('main'))

</script>
</body>

</html>